<!DOCTYPE html>
<html>
<body>
<!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->
<div id="jp_container" class="demo-container">
	<div id="player-header" style="width: 100%;height: 48px;background: url('resources/images/desktop/music/header.png') repeat-x;padding: 0px 10px;">
		<div style="width: 28%;height: 100%;float: left;display: inline-block;">
			<div style="width: 91px;height: 22px;margin-top: 13px;display: inline-block;">
				<div style="width: 91px;height: 22px;display: inline-block;">
					<div class="jp-previous" style="background: url('resources/images/desktop/music/player_button1.png') no-repeat;width: 30px;height: 22px;display: inline-block;float: left;"></div>
					<div class="jp-play" style="background: url('resources/images/desktop/music/player_button1.png') -30px no-repeat;width: 30px;height: 22px;display: inline-block;float: left;"></div>
					<div class="jp-pause" style="background: url('resources/images/desktop/music/pause.png') no-repeat;width: 30px;height: 22px;display: inline-block;float: left;display: none;"></div>
					<div class="jp-next" style="background: url('resources/images/desktop/music/player_button1.png') -60px no-repeat;width: 31px;height: 22px;display: inline-block;float: left;"></div>
				</div>
			</div>
			<div style="width: 120px;height: 19px;margin-top: 12px;margin-left:10px;display: inline-block;">
				<div class="jp-mute" style="background: url('resources/images/desktop/music/volume3.png') no-repeat;width: 20px;height: 19px;display: inline-block;float: left;"></div>
				<div class="jp-unmute" style="background: url('resources/images/desktop/music/volume3.png') no-repeat;width: 20px;height: 19px;display: inline-block;float: left;display: none;"></div>
				<div style="background: url('resources/images/desktop/music/volume3.png') -20px 0px no-repeat;width: 75px;height: 19px;display: inline-block;float: left;position: relative;">
					<div class="volume-ball" style="background: url('resources/images/desktop/music/volume_btn.png');width: 14px;height: 14px;display: inline-block;position: absolute;left: 1px;top: 2px;z-index: 2;"></div>
					<div class="jp-volume-bar" style="width: 62px;height: 14px;display: inline-block;left: 6px;top: 3px;position: absolute;">
						<div class="jp-volume-bar-value" style="height: 100%;background: url('resources/images/desktop/music/volume_back.png') repeat-x;"></div>
					</div>
				</div>
				<div class="jp-volume-max" style="background: url('resources/images/desktop/music/volume3.png') -95px 0px no-repeat;width: 25px;height: 19px;display: inline-block;float: left;"></div>
			</div>
		</div>
		<div style="width: 44%;height: 40px;background: url('resources/images/desktop/music/info.png') repeat-x;display: inline-block;margin-top: 4px;float: left;">
			<div style="width: 86%;height: 100%;margin: 0px auto;padding: 2px;">
				<div style="text-align: center;margin-bottom: 5px;">
					<div class="detail-title" style="color: rgb(178,131,87);font-size: 12px;line-height: 12px;">asdasdasdad</div>
					<div class="detail-artist" style="font-size: 10px;color: rgb(100,64,64);line-height: 10px;">asdasdads</div>
				</div>
				<div class="jp-duration" style="width: 9%;display: inline-block;float: left;color: rgb(120,120,120);font-size: 8px;text-align: center;line-height: 8px;">asdasd</div>
				<div class="jp-progress" style="width:81%;display: inline-block;float: left;">
					<div class="jp-seek-bar" style="width: 80%;height: 8px;background: url('resources/images/desktop/music/seekbar.png') repeat-x;padding: 1px;">
						<div class="jp-play-bar" style="width: 0%;background: url('resources/images/desktop/music/playbar.gif') repeat-x;height: 3px;margin-top: 2px;"></div>
					</div>
				</div>
				<div class="jp-current-time" style="width: 9%;display: inline-block;float: left;color: rgb(120,120,120);font-size: 8px;text-align: center;line-height: 8px;margin-left: 3px;">sdfsdfsd</div>
			</div>
		</div>
		<div style="width: 28%;height: 100%;float: left;display: inline-block;"></div>
	</div>
	<div id="jquery_jplayer">
	</div>
<!-- 	<div class="jp-shuffle">随机播放</div> -->
<!-- 	<div class="jp-shuffle-off">关闭随机播放</div> -->
<!-- 	<div class="jp-repeat">循环</div> -->
<!-- 	<div class="jp-repeat-off">取消循环</div> -->
<!-- 	<ul> -->
<!-- 		<li><a class="jp-stop" href="#">停止</a></li> -->
<!-- 	</ul> -->
	<div id="player-content" style="width: 100%;">
		<div id="player-menu" style="float: left;width: 144px;background: url('resources/images/desktop/music/left_menu.png');height: 100%;display: inline-block;position: relative;border-right: 1px solid #000;">
			<div style="width: 144px;height: 163px;position: absolute;bottom: 0px;">
				<div id="player-post-header" style="width: 144px;height: 19px;background: url('resources/images/desktop/music/poster_header.png') repeat-x;border-right: 1px solid #000;line-height: 19px;text-align: center;color: rgb(120,120,120);font-size: 11px;">
					<span id="player-status">没有播放</span><span class="jp-current-time" style="margin-left: 5px;display: none;">3:14</span>
				</div>
				<div id="player-poster" style="width: 144px;height: 144px;background: url('resources/images/desktop/music/poster.png') no-repeat;background-size: contain;border-right: 1px solid #000;">
				</div>
			</div>
		</div>
		<div id="player-playlist" style="float: left;background: url('resources/images/desktop/music/playlist.png');height: 100%;display: inline-block;">
			<div class="jp-playlist">
				<ul>
					<li></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="player-bottom" style="height: 26px;width: 100%;background: url('resources/images/desktop/music/toolbar.png') repeat-x;position: absolute;bottom: 0px;">
		<div id="player-statistics" style="width: 170px;margin: 0px auto;height: 26px; text-align: center;line-height: 26px;">
			<span class="totalSong">6 首歌</span>,
			<span class="totalTime">25 分钟</span>,
			<span class="totalSize">34 MB</span>
		</div>
	</div>
</div>
</body>
</html>